<!DOCTYPE html>
<html><!--
    -->    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #container{width: 1600px;height:900px;}
        </style>  
    </head>

    <body>
        <div id="container"></div> 
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=cc0799f89df97bac9e98f180c79ae583"></script> 
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=cc0799f89df97bac9e98f180c79ae583"></script> 
        <script type="text/javascript">

            var map = new AMap.Map('container', {
                pitch:0,                    //此行向下两行（包括此行）为3d显示部分，第一行pitch为角度，0度代表垂直，变化范围0-83度
                viewMode: '3D',              //第二行viewMode为模式，选择为3d
                zooms:[3,20],
                resizeEnable: true,
                zoom: 19,
                center: [116.39, 39.9]
            }
            );
            var marker = new AMap.Marker({//地图点标记
                position: [116.480983, 39.989628], //marker所在的位置
                map: map//创建时直接赋予map属性
            });
            AMap.plugin(['AMap.ToolBar', 'AMap.AdvancedInfoWindow','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'], function () {
                //创建并添加工具条控件
                var toolBar = new AMap.ToolBar();
                map.addControl(toolBar);
                //创建高级信息窗体并在指定位置打开
                var infowindow = new AMap.AdvancedInfoWindow({
                    content: '<div class="info-title">高德地图</div><div class="info-content">' +
                            '<img src="http://webapi.amap.com/images/amap.jpg">' +
                            '高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br>' +
                            '<a target="_blank" href="http://mobile.amap.com/">点击下载高德地图</a></div>',
                    offset: new AMap.Pixel(0, -30)
                });
                infowindow.open(map, [116.480983, 39.989628]);
                //创建并添加比例尺
                var scale=new AMap.Scale();
                map.addControl(scale);
                //创建并添加鹰眼功能
                var overview=new AMap.OverView({isOpen:true});
                map.addControl(overview);
                //切换地图类型 在卫星图与默认图之间切换
                var maptype=new AMap.MapType();
                map.addControl(maptype);
                //定位用户主机所在坐标
                var geolocation  = new AMap.Geolocation();
                map.addControl(geolocation);
            })
        </script>
    </body>
</html>